<template>
	<view class="container">
		<scroll-view scroll-y="true" :style="{ height: scrollHeight-safeAreaHeight - 50 + 'px' }" class="list_content">
			<u-grid :border="false" @click="gridClick" col="4" v-if="current==1">
				<u-grid-item v-for="(item,index) in typeList" :key="index" class="item">
					<view class="item_t" :class="index==selectIndex?'select':''">
						<image :src="'https://mp-fff067d4-0ad0-46f1-8940-3076faaf2173.cdn.bspapp.com/image/static/' + item + '.png'"
							mode=""></image>
					</view>
					<text class="text">{{item}}</text>
				</u-grid-item>
			</u-grid>
			<u--form v-if="current==2" labelPosition="left" :model="params" ref="uForm">
				<u-form-item label="金额" borderBottom>
					<u--input v-model="params.money" type="digit" inputAlign="right" border="none" placeholder="请输入金额" ></u--input>
				</u-form-item>
				<u-form-item label="日期" border-bottom @click="showDate = true">
					<u-input v-model="params.date" readonly input-align="right" border="none" placeholder="请选择日期"></u-input>
					<u-icon	slot="right" color="#dadbde"	name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="备注" borderBottom>
					<u--input v-model="params.remark" type="text" inputAlign="right" border="none" placeholder="请输入备注" ></u--input>
				</u-form-item>
			</u--form>
		</scroll-view>
		<view class="foot">
			<u-button v-if="current==1" :disabled="selectIndex==-1" throttleTime="1000" type="primary" shape="circle"
				color="#3585F7" text="下一步" @click="next"></u-button>
			<u-button v-if="current==2" throttleTime="1000" plain type="primary" shape="circle"
				color="#3585F7" text="上一步" @click="current=1"></u-button>
				<view class="gap" style="width: 30rpx;" v-if="current==2"></view>
			<u-button v-if="current==2" throttleTime="1000" type="primary" shape="circle" color="#3585F7" text="保存"
				@click="save"></u-button>
		</view>
		<u-datetime-picker
			:show="showDate" closeOnClickOverlay
			v-model="dateValue" @cancel="showDate=false"
			mode="date" @close="showDate=false"
			@confirm="dateConfirm"
		></u-datetime-picker>
	</view>
</template>

<script>
	import {systemInfo} from "@/mixins/system.js";
	import {formatTimeDay,getStorageSync, navigateBack} from "@/static/utils.js"
	export default {
		data() {
			return {
				current: 1,
				selectIndex: -1,
				typeList: ["餐饮", "零食", "交通", "社交", "水果","蔬菜", "宠物", "电费", "加油", "礼金", "购物", "娱乐", "日用品", "淘宝", "水费", "停车", "护肤品",
					"汽车", "服饰", "旅行"
				],
				dateValue:Number(new Date()),
				showDate:false,
				params: {
					money: "",
					remark: "",
					date: "",
					userId:getStorageSync('userInfo')._id
				},
			};
		},
		onLoad() {
		},
		mixins: [systemInfo],
		methods: {
			gridClick(e) {
				console.log(e);
				this.selectIndex = e
			},
			dateConfirm(e){
				let date = formatTimeDay(e.value)
				this.params.date = date
				this.showDate = false
			},
			next() {
				this.current = 2
				uni.setNavigationBarTitle({
					title: this.typeList[this.selectIndex]
				})
			},
			save(){
				if (!this.params.money) {
					uni.showToast({
						title:"请输入金额"
					})
					return
				}
				if (!this.params.date) {
					uni.showToast({
						title:"请选择日期"
					})
					return
				}
				if (!this.params.remark) {
					uni.showToast({
						title:"请输入备注"
					})
					return
				}
				let date = this.params.date.split('-')
				this.params.year = date[0]
				this.params.month = date[1]
				this.params.day = date[2]
				this.params.type = this.typeList[this.selectIndex]
				console.log(this.params);
				let that = this
				uni.request({
					url:"https://fc-mp-fff067d4-0ad0-46f1-8940-3076faaf2173.next.bspapp.com/selectBookKeep",
					data:that.params,
					success(res) {
						if (res.data.code==200) {
							console.log(res.data.data);
							if (res.data.data && res.data.data.length>0) {
								let param = JSON.parse(JSON.stringify(that.params))
								if (res.data.data[0].list.constructor!==Array) {
									res.data.data[0].list = JSON.parse(res.data.data[0].list)
								}
								param.list = res.data.data[0].list.concat([])
								param.list.push({remark:param.remark,type:param.type,money:param.money})
								param.list = JSON.stringify(param.list)
								that.update(param)
							} else{
								that.addFn(that.params)
							}
						}
					}
				})
			},
			update(payload){
				console.log(payload);
				uni.request({
					url:"https://fc-mp-fff067d4-0ad0-46f1-8940-3076faaf2173.next.bspapp.com/updateBookKeep",
					data:payload,
					success(res) {
						if (res.data.code==200) {
							uni.$u.toast('更新成功！')
							navigateBack(1)
						}
					}
				})
			},
			addFn(payload){
				uni.request({
					url:"https://fc-mp-fff067d4-0ad0-46f1-8940-3076faaf2173.next.bspapp.com/addBookKeep",
					data:payload,
					success(res) {
						if (res.data.code==200) {
							uni.$u.toast('新增成功！')
							navigateBack(1)
						}
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100vw;
		height: 100vh;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			.text {
				color: #555;
				font-size: 26rpx;
			}
		}
		/deep/ .u-grid-item{
			margin-top: 30rpx !important;
		}

		.list_content {
			width: 90vw;
			margin: 0 5vw;
			box-sizing: border-box;
		}

		.item_t {
			width: 100rpx;
			height: 100rpx;
			background: #f3f3f3;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.select {
			background: rgba(0, 125, 255, 0.3);
		}

		.foot {
			width: 100%;
			height: 50px;
			background: #fff;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>